<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <title>${user?.username}</title>
  </head>
  <body>
    
  <div data-role="page" id="info">
  
         <div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>

      <div id="facilityInfo">
        <h1>${user?.username} Profile</h1>
        <h2>${role}</h2>
        </br>
        <h3>Information</h3>
        <div id="addressInfo">
          <table>
            <tr>
              <td>Username: </td>
              <td style="padding-left: 10px">${user.username}</td>
            </tr>
            <tr>
              <td>First Name: </td>
              <td style="padding-left: 10px">${user.firstName}</td>
            </tr>
            <tr>
              <td>Last Name: </td>
              <td style="padding-left: 10px">${user.lastName}</td>
            </tr>
            <tr>
              <td>Email: </td>
              <td style="padding-left: 10px">${user.email}</td>
            </tr>
          </table>
        </div> 
          
        </br>
        <form action="editInfo">
          <g:hiddenField name="username" value="${user.username}"/>
          <g:submitButton name="edit" value="Edit Information"/>
        </form>
      </div>
   
      <div class="ui-body ui-body-b">
              <p><a href="#forums" data-role="button" data-icon="arrow-r" data-iconpos="right">Forums</a></p>
              <p><a href="#posts" data-role="button" data-icon="arrow-r" data-iconpos="right">Posts</a></p>
              <p><a href="#options" data-role="button" data-icon="arrow-r" data-iconpos="right">Options</a></p>
            </div>
      
      <div data-role="footer">
              <p>
                <h4>HealthThink</h4>
                <div id="UserLocation"></div>
              </p> 
                <g:form controller="facility" action="search">
                  <g:submitButton name="button" value="Search" />
                </g:form>
                <g:form controller="facility" action="facilityList" data-inline="true">
                  <g:submitButton name="facilities" value="Facilities" data-inline="true"/>
                </g:form>
                <sec:ifLoggedIn>
                  <g:form controller="logout">
                    <g:submitButton name="logout" value="Logout"/>
                  </g:form>
                  <g:form controller="user" action="view">
                    <g:submitButton name="user" value="User Page" data-inline="true"/>                
                  </g:form>
                </sec:ifLoggedIn>
                <sec:ifNotLoggedIn>
                  <g:form controller="login" action="auth">
                    <g:submitButton name="login" value="Login" data-inline="true"/>                
                  </g:form>
                  <g:form controller="user" action="register">
                    <g:submitButton name="signUp" value="Sign Up" data-inline="true"/>                
                  </g:form>
                <ul>
                  <li><facebookAuth:connect permissions="email"/></li>
                </ul>
              </sec:ifNotLoggedIn>
            </div>
 </div>
    
   <div data-role="page" id="forums">
  
         <div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>
      
      <div data-role="content" data-theme="a"> 

        <div id="facilityLeftSide">
            <h3>Forums Created</h3>
            <g:each var="forum" in="${user.forums}">
              <g:form controller="forum" action="view">
                <g:hiddenField name="facilityName" value="${forum.facility.name}"/>
                <g:hiddenField name="topic" value="${forum.topic}"/>
                <g:submitButton name="button" value="${forum.topic}"/>
              </g:form>
            </g:each>
          </div>

          <p><a href="#info" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>

      </div><!-- /content -->
        
	<div data-role="footer">
                    <p><h4>HealthThink</h4></p>
        </div>
  </div> 
    
  <div data-role="page" id="posts">
  
         <div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>
      
      <div data-role="content" data-theme="a"> 

        <div id="facilityRightSide" style="float: right; max-width: 120px">
          <h3>Recent Posts</h3>
          <g:each var="post" in="${recentPosts}">
            <g:form controller="forum" action="view">
              <g:hiddenField name="facilityName" value="${post.forum.facility.name}"/>
              <g:hiddenField name="topic" value="${post.forum.topic}"/>
              <g:submitButton name="button" value="${post.message}"/>
            </g:form>
            </br></br>
          </g:each>
        </div>

          <p><a href="#info" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>

      </div><!-- /content -->
        
	<div data-role="footer">
                    <p><h4>HealthThink</h4></p>
        </div>
  </div> 

   <div data-role="page" id="options">
  
         <div data-role="header">
                <!--<a href="<g:createLinkTo dir="/"/>"><img id="logo" src="${createLinkTo(dir: 'images', file: 'smallcross.png')}" alt="healththink logo"/></a>-->
                <d>HealthThink</d>
         </div>
      
     <div data-role="content" data-theme="a"> 
      
      <h2>Options</h2>
      <sec:ifAllGranted roles="ROLE_OWNER">
        <g:form action="viewUpgrades">
          <g:submitButton name="button" value="View Upgrade Requests"/>
        </g:form>
        </br>
        <g:form controller="facility" action="register">
          <g:submitButton name="button" value="Register New Facility"/>
        </g:form>
        </br>
      </sec:ifAllGranted>
      
      <sec:ifAnyGranted roles="ROLE_MODERATOR, ROLE_CONTRIBUTOR">
        <g:if test="${!madeRequest}">
          <g:form action="requestUpgrade">
            <g:submitButton name="button" value="Request Upgrade"/>
          </g:form>
        </g:if>
        <g:else>
          Upgrade Requested
        </g:else>
      </sec:ifAnyGranted>
   
      <p><a href="#info" data-direction="reverse" data-role="button" data-theme="b" data-icon="back">Main</a></p>

      </div><!-- /content -->
        
	<div data-role="footer">
                    <p><h4>HealthThink</h4></p>
        </div>
    </div>   
   
    
  </body>
</html>
